<template>
  <div class="panel">
    <div class="page-header">
      红黑任务
      <div class="page-header-rightbtn">
        <el-button size="mini" @click="stopRB()">{{submitLoading ? '正在提交' : '关闭任务 '}}</el-button>
        <el-button size="mini" type="success" @click="startRB()">{{submitLoading ? '正在提交' : '启动任务'}}</el-button>
        <el-button size="mini" icon="el-icon-plus" type="success" @click="openNewForm()">{{submitLoading ? '正在提交' : '新增'}}</el-button>
      </div>
    </div>
    <div class="page-body">
      <div class="search-header" >
        <el-form  size="small"  :inline="true" :model="ruleForm" ref="ruleForm" >
          <el-form-item label="" prop="thirdPartyName"  class="search-width90" >
            <el-input size="mini" v-model="ruleForm.thirdPartyName"  placeholder="关键词"></el-input>
          </el-form-item>
          <el-form-item prop="isTop" class="search-width100"  label="">
            <el-select size="mini" v-model="ruleForm.isTop" placeholder="状态" >
              <el-option label="状态" value=""></el-option>
              <el-option label="不置顶" value="0"></el-option>
              <el-option label="置顶" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="startDate" class="search-time">
            <span class="time-picker"><datetime-picker placeholder="开始时间" size="mini" v-model="ruleForm.startTime" type="date"></datetime-picker></span>
          </el-form-item>
          <el-form-item label="" prop="endDate" class="search-time">
            <span class="time-picker"><datetime-picker placeholder="结束时间" size="mini" v-model="ruleForm.endTime" type="date"></datetime-picker></span>
          </el-form-item>
        </el-form>
        <div class="search-btn">
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          <el-button  size="mini" type="primary" @click="onSearchSubmit">查询</el-button>
        </div>
      </div>

      <!--刪除列-->
      <div class="table-delect-header">
        <el-button size="mini" @click="deleteRows">删除</el-button>
      </div>

      <div class="page-data table-loading"
           v-loading="loading "
           element-loading-customClass="loadingClass"
           element-loading-spinner="dafa-icon-loading01 dafa-icon">
        <!--開始頁面內容物-->
        <div class="el-table table-style">
          <el-table
            :data="tableData"
            ref="tableCheckedList"
            @selection-change="handleSelectionChange"
            :cell-class-name="`table-cell`"
            :header-cell-class-name="`table-header`">
            <el-table-column
              prop="id"
              type="selection"
              width="22"
            >
            </el-table-column>
            <!--編輯行-->
            <el-table-column
              label="策略名称"
              min-width="80"
              class-name="title-blue title-hover-effect">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <!--可能過多字超出行 行數要設寬 width = ""-->
            <el-table-column
              label="更新时间"
              prop="updateTime"
              min-width="140">
            </el-table-column>
            <el-table-column
              label="添加时间"
              prop="createTime"
              min-width="140">
            </el-table-column>
            <el-table-column
              label="状态"
              min-width="80" >
              <template slot-scope="scope">
                <span :class="scope.row.test  ? 'color-secondary' : 'color-success'">{{scope.row.test ?'测试中':'进行中'}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="60"
              class-name="table-option-btn">
              <template slot-scope="scope">
                <div class="table-option-inner">
                  <span @click="handleCommand(scope.row)" title="删除">
                        <i class="el-icon-delete color-blue"></i>
                    </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--============頁碼======================-->
      <div class="page-footer margin-t10">
        <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
          :page-sizes="[20, 100, 300]"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page = "pageNum"
          :page-size="pageSize"
          ref="pagination"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <edit-form
      :data="editData"
      v-model = "openEditShow"
    ></edit-form>
  </div>
</template>

<script>
import EditForm from './form/RBTaskBindEditForm'
import Api from '@/api/base'
import {dateFormat} from '../../utils'
export default {
  name: 'goodsWarehouse',
  components: {
    EditForm
  },
  data () {
    return {
      // 搜尋條件數組
      ruleForm: {
        thirdPartyName: '',
        isTop: '',
        startTime: '',
        endTime: ''
      },
      openEditShow: false, // 編輯新增的開關
      editData: {}, // 編輯新增的彈窗数据
      tableCheckedList: [], // 要删除的列表id
      // 表格數組
      tableData: [],
      loading: false, // 表格的loading
      submitLoading: false, // 按鈕的loading
      // ==============頁碼=================
      total: 0,
      pageNum: 1,
      pageSize: 20
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 搜尋行確認事件
    onSearchSubmit () {
      this.pageNum = 1
      this.getList()
      // 手機版滑窗確認搜尋要關彈窗
    },
    startRB () {
      this.submitLoading = true
      Api.startRB().then((res) => {
        this.submitLoading = false
        if (res.code === 200) {
          this.msgSuccess('成功开启')
        } else {
          this.msgError('开启失败')
        }
      })
    },
    stopRB () {
      this.submitLoading = true
      Api.stopRB().then((res) => {
        this.submitLoading = false
        if (res.code === 200) {
          this.msgSuccess('成功关闭')
        } else {
          this.msgError('关闭失败')
        }
      })
    },
    // api 请求
    getList () {
      this.loading = true
      Api.getRBList().then(res => {
        this.loading = false
        res.data.content.forEach((v) => {
          v.createTime = dateFormat(v.createTime)
          v.updateTime = dateFormat(v.updateTime)
        })
        this.tableData = res.data.content
        // console.log(this.tableData, res.data)
        // this.total = res.data.total
      })
    },
    // ======== 頁碼事件 ==========================
    pageSizeChange (val) {
      this.pageSize = val
      this.getList()
    },
    pageCurrentChange (val) {
      this.pageNum = val
      this.getList()
    },
    // 新增彈窗
    openNewForm () {
      this.openEditShow = true
      this.editData = {}
    },
    deleteRows () {
      if (this.tableCheckedList.length < 1) {
        this.msgError('未选中记录')
        return
      }
      this.msgConfirm('此操作将删除该记录, 是否继续').then(() => {
        this.loading = true
        this.doDelete()
      })
    },
    // 删除记录
    doDelete (id) {
      let parame = {
        id: id || this.getDelId()
      }
      Api.deleteRB(parame).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.msgSuccess('删除成功')
          this.pageNum = 1
          this.getList()
        }
      })
    },
    getDelId () {
      let list = this.tableCheckedList
      let arr = []
      list.forEach(v => {
        arr.push(v.id)
      })
      return arr.join(',')
    },
    // 刪除勾选表格___選中數據推入
    handleSelectionChange (val) {
      this.tableCheckedList = val
    },
    handleCommand (command) {
      this.msgConfirm('此操作将删除该记录, 是否继续', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(command.id)
      }).catch(() => {
        this.msgError('删除失败')
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
